<template>
  <div class="login">
    <!-- logo -->
    <div class="logo"><img src="../assets/image/logo.png" alt="logo"></div>
    <!-- 账号与密码 -->
    <div>
      <div class="input"> <img class="input-icon" src="../assets/image/icon_user.png" alt=""><input v-model="username" type="text" placeholder="请输入用户名/手机号"></div>
      <div class="input"><img class="input-icon" src="../assets/image/icon_pwd.png" alt=""><input v-model="password" type="password" placeholder="请输入密码"></div>
    </div>
    <!-- 登录按钮 -->
    <div><button class="login-btn" @click="login">登录</button></div>
    <div class="other">
      <div @click="$router.push('/register')">前往注册</div>
      <div>忘记密码</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import request from '../api/request'; // 导入封装后的Axios实例
import _ from 'lodash'; // 导入lodash库

const username = ref(''); // 用户名/手机号
const password = ref(''); // 密码

// 创建防抖函数
const debouncedLogin = _.debounce(async () => {
  try {
    const response = await request.post('/movie/login', {
      acc: username.value,
      pwd: password.value
    });
    // 登录成功后的处理逻辑
    console.log('登录成功', response);
    // 存储token到localStorage
    localStorage.setItem('token', response.data.token);
    // 这里可以添加跳转到其他页面或存储用户信息等逻辑
  } catch (error) {
    // 登录失败后的处理逻辑
    console.error('登录失败', error);
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.error('Response data:', error.response.data);
      console.error('Response status:', error.response.status);
      console.error('Response headers:', error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.error('Request:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Error message:', error.message);
    }
    console.error('Error config:', error.config);
  }
}, 500); // 500毫秒防抖延迟

// 创建节流函数
const throttledLogin = _.throttle(async () => {
  try {
    const response = await request.post('/movie/login', {
      acc: username.value,
      pwd: password.value
    });
    // 登录成功后的处理逻辑
    console.log('登录成功', response);
    // 存储token到localStorage
    localStorage.setItem('token', response.data.token);
    // 这里可以添加跳转到其他页面或存储用户信息等逻辑
  } catch (error) {
    // 登录失败后的处理逻辑
    console.error('登录失败', error);
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.error('Response data:', error.response.data);
      console.error('Response status:', error.response.status);
      console.error('Response headers:', error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.error('Request:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Error message:', error.message);
    }
    console.error('Error config:', error.config);
  }
}, 1000); // 1000毫秒节流间隔

// 登录函数
const login = () => {
  // 使用防抖函数
  debouncedLogin();
  // 或者使用节流函数
  // throttledLogin();
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: red;
}

.login {
  margin: 0 20px;
}

.logo {
  text-align: center;
  padding: 100px 0;
}

.input {
  display: flex;
  align-items: center;

  .input-icon {
    width: 20px;
    height: 20px;
    margin: 0 20px;
    margin-bottom: 20px;

  }

  input {
    width: 80%;
    height: 30px;
    align-content: center;
    margin-bottom: 20px;
    border: none;
  }
}


.login-btn {
  width: 100%;
  height: 40px;
  background-color: red;
  border: none;
  border-radius: 8px;
  color: white;
}

.other {
  display: flex;
  justify-content: space-between;
}
</style>